<template>
  <div @click="$router.push('/foryou')">
    <div class="insp-type">
      <img src="https://cdn7.axureshop.com/demo/2090757/images/%E7%81%B5%E6%84%9F%E5%90%88%E9%9B%86/u279.svg
" @click="$router.push('/home/index')">
      <h1>玄关设计入门仪式感</h1>
      <span>Amor为你精心推荐的专题</span>
    </div>
    <!-- 推荐项 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <div class="insp-item">
        <inspItem v-for="item in 10"></inspItem>
      </div>
    </van-list>
  </div>
</template>

<script>
import inspItem from "@/components/inspirationItem.vue"
export default {
  components: { inspItem },
  data() {
    return {
      loading: false,
      finished: false,
    }
  },
}
</script>

<style lang="scss" scoped>
.insp-type {
  width: 100%;
  height: 200px;
  background-color: #C9B5A1;
  color: #Fff;
  position: relative;

  img {
    width: 25px;
    height: 25px;
    margin: 30px 0 30px 30px;
  }

  h1 {
    margin: 0 30px;
  }

  span {
    display: inline-block;
    font-size: 14px;
    margin: 10px 0 0 30px;
  }
}

.insp-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 15px;
}
</style>